<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 表单 -->
      <el-form
        ref="primaryForm"
        class="demo-ruleForm"
        label-width="100px"
        style="margin:0 60px;"
        :model="freightForm"
        :rules="rules"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select v-model="freightForm.templateType" placeholder="请选择模板类型" style="width:100%">
            <el-option label="同城寄" value="1" />
            <el-option label="省内寄" value="2" />
            <el-option label="经济区互寄" value="3" />
            <el-option label="跨省" value="4" />

          </el-select>
        </el-form-item>

        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select v-model="freightForm.transportType" placeholder="请选择运送类型" style="width:100%">
            <el-option label="普快" value="普快" />
            <el-option label="特快" value="特快" />
          </el-select>
        </el-form-item>

        <el-form-item
          label="关联城市"
          prop="associatedCityList"
        >
          {{ freightForm.associatedCityList }}
        </el-form-item>、

        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input v-model.number="freightForm.firstWeight" step="0.01" placeholder="请输入在管面积">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input v-model.number="freightForm.continuousWeight" placeholder="请输入物业费">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input v-model.number="freightForm.lightThrowingCoefficient" placeholder="请输入物业费" /></el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
        <el-button type="primary" style="background-color: #e15536;border: none;" @click="submitPrimaryForm">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>

      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { addCarriagesApi } from '@/api/freightManage'
export default {
  name: 'AddBuilding',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增楼宇'
    },
    freightId: {
      type: Number,
      default: 1
    }

  },
  data() {
    return {
      freightForm: {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: '全国', // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: ''// 轻抛系数
      },
      rules: {
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'change' }
        ],
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'change' }],
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' },
          { type: 'number', message: '首重价格必须为数字值', trigger: 'blur' }],
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' },
          { type: 'number', message: '续重价格必须为数字值', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' },
          { type: 'number', message: '轻抛系数必须为数字值', trigger: 'blur' }]
      }
    }
  },

  methods: {
    // 关闭模态框
    handleClose() {
      this.$emit('update:showDialog', false)
      this.$refs.primaryForm.resetFields()
    },
    async submitPrimaryForm() {
      await this.$refs.primaryForm.validate()
      //   await addCarriagesApi(this.freightForm)
      //   this.$message.success('新增成功')
      this.$message.error('很抱歉，演示系统，不允许修改')
      this.handleClose()
    },
    // 编辑
    async editFreight(obj) {
      console.log(obj)
      this.freightForm = obj
    //   const res = await addCarriagesApi(this.freightId)
    //   console.log(res)
    //   this.freightForm = res.data
    }
  }
}
</script>
<style scoped>

  .text {
    font-size: 14px;
    margin: 30px;

  }

</style>
